<template>
  <div class="company-info">
    <a-spin :spinning="loading">
      <a-form :model="formState" ref="formDataRef" name="basic" :label-col="{ style: 'width:145px' }" :wrapper-col="{ style: 'calc(100% - 145px)' }" autocomplete="off">
        <div class="title">基本信息</div>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="公司LOGO" name="logUrls" :rules="[{ required: false, message: '请上传图片!' }]">
              <CustomerUploadFile mode="/parent/" :disabled="type === 3" :multiple="false" v-model:value="formState.logUrls" :maxCount="1" list-type="picture-card">
                <plus-outlined></plus-outlined>
              </CustomerUploadFile>
            </a-form-item>
          </a-col>

          <a-col :span="12">
            <a-form-item label="公司简称" name="shortName" :rules="[{ required: true, message: '请填写公司简称!' }]">
              <a-input v-model:value="formState.shortName" :maxlength="20" placeholder="请输入" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="公司全称" name="companyName" :rules="[{ required: true, message: '请填写公司全称!' }]">
              <a-input v-model:value="formState.companyName" :maxlength="20" placeholder="请输入" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="公司英文名" name="companyNameEn" :rules="[{ required: false, message: '请填写公司英文名!' }]">
              <a-input v-model:value="formState.companyNameEn" :maxlength="20" placeholder="请输入" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="运单号前缀" name="waybillPrefix" :rules="[{ required: true, message: '请填写运单前缀!' }]">
              <a-input v-model:value="formState.waybillPrefix" @keyup="validateEnHandle($event, formState, ['waybillPrefix'])" :maxlength="10" placeholder="请输入" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="手机号码" name="phone" :rules="[{ required: true, message: '请填写手机号码!' }]">
              <a-input v-model:value="formState.phone" @keyup="validateIntergeHandle($event, formState, ['phone'])" :maxlength="11" placeholder="请输入" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="公司地址" name="typeValue" :rules="[{ required: true, message: '请选择公司地址!' }]">
              <a-cascader
                v-model:value="formState.typeValue"
                :fieldNames="{ label: 'name', value: 'code', children: 'child' }"
                :options="baseStore.provincesOpts"
                @change="changeAddressHandle"
                :show-search="{ filter }"
                placeholder="请选择"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="公司详细地址" name="companyAddressDetails" :rules="[{ required: true, message: '请填写公司详细地址!' }]">
              <a-input v-model:value="formState.companyAddressDetails" :maxlength="20" placeholder="请输入" />
            </a-form-item>
          </a-col>

          <a-col :span="12" v-if="type === 2">
            <a-form-item label="数据权限" name="dataScope" :rules="[{ required: true, message: '请选择数据权限!' }]">
              <a-select v-model:value="formState.dataScope" placeholder="请输入">
                <a-select-option v-for="(item, index) in dataDict['DATA_PERMISSION']" :key="index" :label="item.name" :value="item.code">{{ item.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <div class="title">接口信息</div>
        <a-row v-for="(item, index) in formState.bizDeptApiConfigReqDtoList" :gutter="16" :key="index">
          <a-col :span="10">
            <a-form-item label="平台" :name="['bizDeptApiConfigReqDtoList', index, 'platformId']" :rules="[{ required: false, message: '请选择平台!' }]">
              <a-select v-model:value="item.platformId" placeholder="请选择">
                <a-select-option v-for="(item, index) in dataDict['AGENT_PLATFORM']" :key="index" :label="item.name" :value="Number(item.code)">{{ item.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="10">
            <a-form-item label="代理名称" :name="['bizDeptApiConfigReqDtoList', index, 'agentId']" :rules="[{ required: false, message: '请选择代理名称!' }]">
              <a-select v-model:value="item.agentId" placeholder="请选择">
                <a-select-option v-for="(item, index) in outBoundAgentOpts" :key="index" :label="item.name" :value="item.id">{{ item.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-button @click="addAgentConfigHandle" style="margin-right: 16px" type="primary"><plus-outlined /></a-button>
            <a-button @click="deleteAgentConfigHandle(index)" v-if="formState.bizDeptApiConfigReqDtoList.length > 1" type="danger"><minus-outlined /></a-button>
          </a-col>
          <a-col :span="10">
            <a-form-item label="ApiKey" :name="['bizDeptApiConfigReqDtoList', index, 'apiKey']" :rules="[{ required: false, message: '请填写Token!' }]">
              <a-input v-model:value="item.apiKey" @keyup="validateZhInputHandle($event, item, ['receiveAccount'])" :maxlength="50" placeholder="请输入" />
            </a-form-item>
          </a-col>
          <a-col :span="10" v-if="type === 1">
            <a-form-item label="域名" :name="['bizDeptApiConfigReqDtoList', index, 'domainName']" :rules="[{ required: false, message: '请填写域名!' }]">
              <a-input v-model:value="item.domainName" @keyup="validateZhInputHandle($event, item, ['receiveAccount'])" :maxlength="50" placeholder="请输入" />
            </a-form-item>
          </a-col>
          <a-col :span="10" v-if="type === 1">
            <a-form-item label="用户名" :name="['bizDeptApiConfigReqDtoList', index, 'userName']" :rules="[{ required: false, message: '请填写用户名!' }]">
              <a-input v-model:value="item.userName" :maxlength="30" placeholder="请输入" />
            </a-form-item>
          </a-col>
        </a-row>
        <!-- <div class="title">账户信息</div>
        <a-row v-for="(item, index) in formState.bizDeptAccountReqDtoList" :gutter="16" :key="index">
          <a-col :span="10">
            <a-form-item label="账户名称" :name="['bizDeptAccountReqDtoList', index, 'name']" :rules="[{ required: true, message: '请填写账户名称!' }]">
              <a-input v-model:value="item.name" :maxlength="25" placeholder="请输入" />
            </a-form-item>
          </a-col>
          <a-col :span="10">
            <a-form-item label="银行名称" :name="['bizDeptAccountReqDtoList', index, 'bankName']" :rules="[{ required: true, message: '请填写银行名称!' }]">
              <a-input v-model:value="item.bankName" :maxlength="25" placeholder="请输入" />
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-button @click="addAccountHandle" style="margin-right: 16px" type="primary"><plus-outlined /></a-button>
            <a-button @click="deleteAccountHandle(index)" v-if="formState.bizDeptAccountReqDtoList.length > 1" type="danger"><minus-outlined /></a-button>
          </a-col>
          <a-col :span="10">
            <a-form-item label="收款账号" :name="['bizDeptAccountReqDtoList', index, 'receiveAccount']" :rules="[{ required: true, message: '请填写收款账号!' }]">
              <a-input v-model:value="item.receiveAccount" @keyup="validateZhInputHandle($event, item, ['receiveAccount'])" :maxlength="25" placeholder="请输入" />
            </a-form-item>
          </a-col>

          <a-col :span="10">
            <a-form-item label="联行号" :name="['bizDeptAccountReqDtoList', index, 'sisterBankNum']" :rules="[{ required: false, message: '请填写收款账号!' }]">
              <a-input v-model:value="item.sisterBankNum" @keyup="validateZhInputHandle($event, item, ['sisterBankNum'])" :maxlength="25" placeholder="请输入" />
            </a-form-item>
          </a-col>

          <a-col :span="10">
            <a-form-item label="默认账户" :name="['bizDeptAccountReqDtoList', index, 'isDefault']" :rules="[{ required: false, message: '请选择是否默认账户!' }]">
              <a-radio-group v-model:value="item.isDefault" @change="changeDefaultAccountHandle(index)">
                <a-radio :value="1">是</a-radio>
                <a-radio :value="0">否</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
        </a-row> -->
      </a-form>
    </a-spin>
    <div class="operation-wrapper">
      <a-button type="primary" @click="submitHandle">保 存</a-button>
      <a-button @click="resetHandle">取 消</a-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { PlusOutlined, MinusOutlined } from "@ant-design/icons-vue";
import baseStore from "@/store/modules/base";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
import { toRefs, watch } from "vue";
import CommonHook from "@/hook/commonHook";
import { getCompanyInfoApi } from "@/api/managementCenter/departmentPersonnel";
const props = withDefaults(
  defineProps<{
    visible: boolean;
    passData: Base.GeneraDataType;
    type: number; //1编辑 2新建公司同级
  }>(),
  {}
);
const emit = defineEmits<{
  (e: "update:visible", visible: boolean): void;
  (e: "submit"): void;
  (e: "updateInfo"): void;
}>();
const { visible, passData, type } = toRefs(props);
const { dataDict } = CommonHook();
const { formDataRef, formState, loading, filter, getAllAgent, outBoundAgentOpts } = InitHook();
const {
  submitHandle,
  resetHandle,
  validateEnHandle,
  validateIntergeHandle,
  changeAddressHandle,
  validateZhInputHandle,
  // addAccountHandle,
  // deleteAccountHandle,
  // changeDefaultAccountHandle,
  addAgentConfigHandle,
  deleteAgentConfigHandle
} = OperationHook({
  formDataRef,
  formState,
  passData,
  emit,
  type
});
const init = () => {
  getAllAgent();
  if (type.value === 1) {
    loading.value = true;
    return getCompanyInfoApi({ id: passData.value.id })
      .then((res: any) => {
        const { code, data } = res;
        if (code === 200) {
          Object.assign(formState, data);
          if (!data.logUrls) formState.logUrls = [];
          formState.id = passData.value.id;
          formState.typeValue = [data.provinceCode, data.cityCode, data.areaCode];
          // if (!data.bizDeptAccountReqDtoList.length) {
          //   formState.bizDeptAccountReqDtoList = [
          //     {
          //       id: undefined,
          //       name: "",
          //       bankName: "",
          //       receiveAccount: "",
          //       isDefault: 0,
          //       sisterBankNum: ""
          //     }
          //   ];
          // }
          if (!data.bizDeptApiConfigReqDtoList.length) {
            formState.bizDeptApiConfigReqDtoList = [
              {
                platformId: "",
                platformName: "",
                agentId: "",
                agent: "",
                apiKey: "",
                domainName: "",
                userName: ""
              }
            ];
          }
        }
      })
      .finally(() => (loading.value = false));
  } else {
    // Reflect.deleteProperty(formState, "companyNameEn");
    // Reflect.deleteProperty(formState, "logUrls");
    Reflect.deleteProperty(formState, "name");
  }
};
watch(
  () => visible.value,
  (v: boolean) => {
    if (v) {
      console.log(passData.value);
      init();
    }
  }
);
init();
</script>
<style lang="stylus" scoped>
.company-info{
    padding-bottom: 50px;
    .title{
        font-size: 16px;
        font-weight: 600;
    }
    :deep(.ant-select),:deep(.ant-input-number){
        width: 100%
    }
    .operation-wrapper{
      position: absolute;
      background-color: #fff;
      left: 0;
      bottom: 0;
      width: 100%;
      padding: 12px 0;
      text-align: center;
      box-shadow: 1px 1px 5px #ccc;
      z-index: 99;
      :deep(.ant-btn-primary){
        margin-right: 12px;
      }
    }
}
</style>
